<!--
 * @Author: your name
 * @Date: 2021-11-10 15:29:01
 * @LastEditTime: 2021-11-18 10:37:09
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\admin\src\views\home\articleAdmin\index.vue
-->
<template>
  <div class="allAdmin">
    <div class="search-box">
      <el-card class="box-card">
        <div class="input-box">
          <div class="title-input-box">
            <div>账户:</div>
            <el-input placeholder="请输入用户账户" v-model="username">
            </el-input>
          </div>
          <div class="title-input-box">
            <div>邮箱:</div>
            <el-input placeholder="请输入账户邮箱" v-model="email"> </el-input>
          </div>
          <div class="title-input-box">
            <div>角色:</div>
            <el-select
              v-model="role"
              placeholder="请选择"
              style="width: 190px; margin-left: 10px"
            >
              <el-option
                v-for="(item, index) in roleOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="title-input-box">
            <div>状态:</div>
            <el-select
              v-model="state"
              placeholder="请选择"
              style="width: 190px; margin-left: 10px"
            >
              <el-option
                v-for="(item, index) in stateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search-btn-box">
          <el-button type="primary" @click="searchUserList()">搜索</el-button>
          <el-button @click="resetVal">重置</el-button>
        </div>
      </el-card>
    </div>
    <div class="table-box">
      <el-card>
        <div class="new-create">
          <div class="batch-handler-box" v-if="multipleSelection.length">
            <el-button plain @click="batchHandlerUser('batchUserStart')"
              >启用</el-button
            >
            <el-button plain @click="batchHandlerUser('batchUserForbid')"
              >禁用</el-button
            >
            <el-button plain @click="batchHandlerUser('batchUserRelieve')"
              >解除授权</el-button
            >
            <el-button plain @click="batchHandlerUser('batchUserAllow')"
              >授权</el-button
            >
          </div>
          <div v-else></div>
          <div>
            <i class="iconfont icon-shuaxin" style="font-size: 20px"></i>
          </div>
        </div>
      </el-card>
      <div class="table-info-box">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; overflow: none"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" fixed> </el-table-column>
          <el-table-column label="账户" fixed width="140px">
            <template slot-scope="scope" fixed>{{
              scope.row.username
            }}</template>
          </el-table-column>
          <el-table-column label="邮箱" fixed width="300">
            <template slot-scope="scope" fixed>{{ scope.row.email }}</template>
          </el-table-column>
          <el-table-column label="角色" width="140">
            <template slot-scope="scope">{{ scope.row.identity }}</template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.state * 1 === 0">
                <i class="iconfont icon-yuandian" style="color: #faad14"></i>
                已锁定
              </div>
              <div v-else>
                <i class="iconfont icon-yuandian" style="color: #52c41a"></i>
                可用
              </div>
            </template>
          </el-table-column>
          <el-table-column label="注册日期" width="300">
            <template slot-scope="scope">{{ scope.row.reg_time }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="changeUserState(scope.row.id)">{{
                scope.row.state * 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button type="text" @click="changeUseIdentity(scope.row.id)">{{
                scope.row.identity === "访客" ? "授权" : "解除授权"
              }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-card class="pageination-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 12, 24, 36]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import api from "../../../api";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      total: null,
      pageSize: 8,
      username: "", //搜索
      state: null, //状态
      role: "",
      email: "", //邮件
      stateOptions: [
        {
          value: 0,
          label: "锁定",
        },
        {
          value: 1,
          label: "可用",
        },
      ],
      roleOptions: [
        {
          value: "管理员",
          label: "管理员",
        },
        {
          value: "访客",
          label: "访客",
        },
      ],
    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //获取文章列表
    async getUserList() {
      //获取数据接口
      const res = await api.getAllUser({
        pageSize: this.pageSize,
        pageIndex: this.currentPage,
        state: this.state,
        username: this.username,
        identity: this.role,
        email: this.email,
      });
      if (res.success) {
        this.tableData = res.data.res;
        this.total = res.data.total;
      }
    },
    //改每页条数时
    handleSizeChange(val) {
      this.pageSize = val;
      this.getUserList();
    },
    //改变页码时
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getUserList();
    },
    //清空各个框 并重新获取数据
    resetVal() {
      this.state = null;
      this.username = "";
      this.role = "";
      this.currentPage = 1;
      this.email = "";
      this.getUserList();
    },
    //改变用户状态
    async changeUserState(id) {
      const res = await api.changeUserState({ id });
      if (res.success) {
        //重新渲染数据
        this.getUserList();
        this.$message({
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message.error("错误!!!");
      }
    },
    //改变用户身份
    async changeUseIdentity(id) {
      const res = await api.changeUseIdentity({ id });
      if (res.success) {
        //重新渲染数据
        this.getUserList();
        this.$message({
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message.error("错误!!!");
      }
    },
    //操作函数 传入path(api对应接口--->string)
    async batchHandlerUser(url) {
      const res = await api[url]({
        batchList: this.multipleSelection, //需要切换状态的数组
      });
      if (res.success) {
        //重新渲染
        this.getUserList();
        this.$message({
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message.error("错误!!!");
      }
    },
    //搜索事件
    searchUserList() {
      this.currentPage = 1;
      this.getUserList();
    },
  },
  created() {
    //初始化数据
    this.getUserList();
  },
};
</script>

<style lang="scss" scoped>
.search-box {
  width: 95%;
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 15px;
  .input-box {
    display: flex;
  }
}
.input-box .title-input-box {
  margin: 0 20px;
  display: flex;
  align-items: center;

  div {
    width: 36px;
  }
  .el-input {
    width: 250px;
    margin-left: 10px;
  }
}
.search-btn-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
  .el-button {
    height: 35px;
    line-height: 12px;
  }
}
.table-box {
  width: 95%;
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 15px;
}
.new-create {
  display: flex;
  align-items: center;
  justify-content: space-between;
  i {
    margin-left: 15px;
  }
  .el-button {
    height: 35px;
    line-height: 12px;
  }
}
.el-table {
  overflow: none;
}
.pageination-box {
  display: flex;
  align-content: center;
  justify-content: flex-end;
}
.batch-handler-box {
  .el-button {
    padding: 0px 16px;
    border-radius: 2px;
  }
  .del-btn {
    padding: 6px 16px;
    margin-left: 12px;
    background-color: #fff;
    border: 1px solid #f56c6c;
    color: #f56c6c;
    border-radius: 2px;
    cursor: pointer;
  }
  .del-btn:hover {
    border: 1px solid #f77979;
    color: #f77979;
  }
}
</style>
